<template>
  <div style="height:400px;position:relative;">
    <p class="text">{{text}}</p>
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import pieEchartsOption from '@/utils/echarts/pie.js'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 登录处室信息
        deptPojo: {
          deptId: ''
        },
        jqTimelist: {
          color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80",
            "#8d98b3", "#FFEA01", "#B8D07C", "#fca4bb", "#dc69aa",
            "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050",
            "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089"],
          title: {
            left: '27%',
            top: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          graphic: [],
          series: []
        },
        xlpeoplenum: [], // 展示数据用的
        text: '', //  统计图 显示数据
        sum: '' // 统计图 中心数字
      }
    },
    created () {
      this.getjqsjList()
    },
    methods: {
      getjqsjList () {
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpOverdueCharts, this.deptPojo).then(res => {
          if (res) {
            this.xlpeoplenum = res.map(item => {
              return { value: item.value, name: item.name }
            })
            if (res.length === 0) {
              this.text = 'Perfect~~~无超期工单'
              this.jqTimelist.title.text = ''
            } else {
              this.text = this.$moment().format('YYYY') + '年超期件统计'
              this.getEChartsSum()
              this.jqTimelist.title.text = this.sum
            }
          }
          this.apijqsjData()
        })
      },
      getEChartsSum () {
        let ss = this.xlpeoplenum.map(item => {
          return item.value
        })
        this.sum = ss.reduce((totle, item) => totle + item)
           switch (this.sum.toString().length) {
          case 1:
            this.jqTimelist.title.left = '28.5%'
            break
          case 2:
            this.jqTimelist.title.left = '28%'
            break
          case 3:
            this.jqTimelist.title.left = '27.2%'
            break
          case 4:
            this.jqTimelist.title.left = '26.5%'
            break
          default:
            break
        }
      },
      apijqsjData () {
        this.jqTimelist.series = [
          {
            data: this.xlpeoplenum,
            name: '工单超期件统计',
            selectedMode: 'single',
            radius: [60, 120],
            roseType: 'radius'
          }
        ]
        this.jqTimelist.graphic = [
          {
            style: {
              text: ''
            }
          },
          {
            style: {
              text: ''
            }
          }
        ]
        this.jqTimelist = pieEchartsOption(this.jqTimelist)
      }
    }

  }
</script>

<style lang='scss' scoped>
  .text {
    position: absolute;
    top: 0px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
  }
</style>
